<template>
	<view class="about">
		<!-- <view v-if="hasLogin"> -->
		<!-- 导航 -->
		<!-- <u-navbar back-icon-color="#000000" title="客服" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<u-navbar back-text="客服" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- end -->
		<template>
			<u-collapse :item-style="itemStyle" :body-style="bodyStyle" :head-style="headStyle">
				<u-collapse-item :title="item.question" v-for="(item, index) in itemList" :key="index">
					<view class="" style="line-height: 35rpx;" v-for="(items, indexs) in item.answer" :key="indexs">
						{{indexs+1+'、'}}{{items}}
					</view>
				</u-collapse-item>
			</u-collapse>
		</template>
		<u-button class="butttom" type="primary" shape="circle" open-type='contact' session-from=''>人工客服</u-button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundColor: '#fca800',
				},
				itemList: [],
				itemStyle: {
					borderBottom: '2rpx solid #E4E4E4',
					padding: '24rpx 12rpx  13rpx 40rpx',
					fontFamily:'PingFang SC'
				},
				headStyle: {
					fontSize: '30rpx',
					fontWeight: '400',
					color:'#3F3F3F'
				},
				bodyStyle: {
					fontSize: '26rpx',
					fontWeight: '400',
					lineHeight: '36rpx',
					color:'#727272'
				},
			}
		},
		onLoad() {
			this.getQuestion()
		},
		methods: {
			getQuestion(){
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'user/center/question'
				};
				this.http.httpTokenRequest(opts).then(res => {
					if(res.code==200){
						this.itemList = res.data
					}else{
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 导航 */
	.collapse-item {
		color: red;
		padding-bottom: 10px;
	}

	.u-collapse-head {
		border-bottom: 1px solid;
	}
	.butttom{
		width: 642rpx;
		height: 72rpx;
		position: absolute;
		z-index: 2;
		bottom: 74rpx;
		left: 54rpx;
	}
</style>
